<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" append-to-body width="65%">
    <File :type="'component'" @select-file="selectFile" />
  </Dialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'FileSelect' })

const File = defineAsyncComponent(() => import('@/views/infra/file/index.vue'))

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('素材管理') // 弹窗的标题
const formData = ref({})
const formRef = ref() // 表单 Ref
const open = () => {
  dialogVisible.value = true
  dialogTitle.value = '素材管理'
  resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 使用选中的素材 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const selectFile = (fileList: any) => {
  emit('success', fileList)
  dialogVisible.value = false
}
/** 重置表单 */
const resetForm = () => {
  formData.value = {}
  formRef.value?.resetFields()
}
</script>
